<script setup lang="ts">
import { NFormItem, NInput } from 'naive-ui'
import { sendRequest } from '@/utils/api'
import type { WorkFlow } from '@/api/djRecord'
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'

const route = useRoute()

const workInfo = ref({} as WorkFlow)
const queryWorkFlow = async () => {
  const [error, res] = await sendRequest({
    module: 'djRecord',
    api: 'workFlow',
    override: {
      params: {
        djRecordId: route.query.id
      }
    }
  })

  if (error) throw error
  if (res.code !== 0) throw new Error(res.msg)
  workInfo.value = res.data || {}
}

onMounted(queryWorkFlow)
</script>

<template>
  <div class="pi-title">人员信息</div>
  <div class="pi-card">
    <NFormItem
      label="申请人："
      label-placement="left"
    >
      <NInput
        :value="workInfo.creator"
        disabled
      />
    </NFormItem>
    <NFormItem
      label="督交人："
      label-placement="left"
    >
      <NInput
        :value="workInfo.receiver"
        disabled
      />
    </NFormItem>
  </div>
</template>

<style lang="scss" scoped>
.pi-title {
  font-size: 26rem;
  margin-bottom: 30rem;
  color: #048c5e;
  line-height: 1;
}

.pi-card {
  display: flex;
  gap: 0 32rem;
  padding: 20rem;
  background-color: #e1e1e1;

  .n-form-item {
    flex: 1;
  }
}
</style>
